<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>chat_home</title>
    <link rel="stylesheet" href="mui/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="mui/css/app.css"/>
    <script src="static/header.js" charset="utf-8"></script>
    <script src="static/home.js" charset="utf-8"></script>
    <!--<script src="mui/js/mui.min.js"></script>-->
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #fff;
        }
        #title {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
			line-height: 50px;
			padding-left: 40px;
			font-size: 18px;
            /*border: 1px solid dimgray;*/
            background-color: #F0F0F1;
			z-index: 100;
        }
        .msg_title{
            position: fixed;
            top: 0;
            width: 200px;
            height: 50px;
            line-height: 50px;
            padding-left: 40px;
            font-size: 18px;
            /*border: 1px solid dimgray;*/
            background-color: #F0F0F1;
        }
        .body_content {
            width: 100%;
            bottom: 0;
            margin-top: 50px;
        }

        .left_div {
            float: left;
            border-right: 1px solid dimgray;
            position: fixed;
            z-index: 100;
            background-color: #F9F9F9;
            height: 100%;
        }

        .left_div ul {
            margin: 0;
            padding: 0;
        }

        .left_div li {
            list-style: none;
            padding: 10px 10px 10px 20px;
            /* border-bottom: 1px solid dimgray; */
        }

        .left_div li:hover {
            background-color: #E5E5E5;
        }

        .left_div .li_this {
            background-color: #D1DEF0;
        }

        .right_div {
            overflow: hidden;
            width: calc(100% - 200px);
            /*border-left: 1px solid dimgray;*/
        }
        #msg_ul{
            background-color: #fff;
            padding-bottom: 100px;
            /*border:1px solid red;*/
            border-bottom: 1px solid #fff;
        }
        /**消息li*/
        img {
            border-radius: 3px;
        }
        .f_msg_div {
            width: 60%;
            margin-top: 0%;
        }
        .my_msg_div {
            overflow: visible;
            float: right;
            width: 60%;
        }
        .msg1,
        .msg2 {
            /*border: 1px solid #ddd;*/
            background-color: #fff;
			color: #fff;
            font-size: 16px;
			/* font-weight: lighter; */
            /* font-family: "STXingkai",Arial,"Microsoft YaHei"; */
			/* font-family: Verdana, Geneva, sans-serif; */
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            line-height: 18px;
            padding: 12px;
            box-sizing: border-box;
            border-radius: 6px;
			position: relative;
            word-break: break-all;
            white-space: normal;
        }
        .msg1 {
            margin-left: 10px;
            width: auto;
            display: inline-block !important;
            display: inline;
            background-color: #349d34;
        }
        .msg2 {
            margin-right: 3px;
            background-color: #247c9f;
        }
        .msg1 span {
            display: block;
            width: 0;
            height: 0;
            border-width: 3px 14px 8px 0px;
            border-style: solid;
            border-color: transparent #349d34  transparent transparent; /*#eee*/
            top: 20%;
            left: -10px;
            /* z-index: 1021; */
            position: absolute;
        }
        .msg2 span {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-width: 3px 0 8px 8px;
            border-style: solid;
            border-color: transparent transparent transparent #247c9f;
            top: 20%;
            left: 100%;
        }
        /**输入消息模块*/
        .msg-text{
            position: fixed;
            bottom: 0;
            margin-bottom: -12px;
            width: 100%;
        }
        #submit{
            float: right;
            width: 100px;
            height: 30px;
            margin-right: 240px;
            margin-top: -50px;
            background-color: #E9E9E9;
            color: #00FF00;
        }
        #content{
            width: 88%;
            height: 80px;
        }
        /*去掉框架属性*/
        .mui-table-view:after{
            background-color: inherit;
        }
    </style>
</head>
<script type="text/javascript">
    $(function () {

    })
</script>
<body>

<div id="title">
    <h3 style="padding: 15px 0 0 0;">SOCKET</h3>
	<div style="float: right;margin-right: 30px;margin-top: -41px;">
		<img src="static/img/fire-1.jpg" style="width: 40px;height: 40px;"></img>
		<span style="margin-left: 10px;">管理员</span>
	</div>
</div>
<span id="friendId" style="display: none"></span>
<div class="body_content">
    <div class="left_div" style="width: 200px">
        <ul class="nav_ul">
            <li data-id="1">标题1</li>
            <li data-id="2">标题2</li>
            <li data-id="3">标题3</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
        </ul>
    </div>

    <div class="right_div" style="margin-left: 200px;">
        <div class="content">
            <div class="home_div">
                <li class="mui-table-view-cell mui-media">
                    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
                    <p>登录次数：18 </p>
                    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
                    <p>登录次数：18 </p>
                    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
                </li>
				<li class="mui-table-view-cell mui-media">
				    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
				    <p>登录次数：18 </p>
				    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
				</li>
				<li class="mui-table-view-cell mui-media">
				    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
				    <p>登录次数：18 </p>
				    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
				</li>
				<li class="mui-table-view-cell mui-media">
				    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
				    <p>登录次数：18 </p>
				    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
				</li>
				<li class="mui-table-view-cell mui-media">
				    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
				    <p>登录次数：18 </p>
				    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
				</li>
				<li class="mui-table-view-cell mui-media">
				    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
				    <p>登录次数：18 </p>
				    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
				</li>
				<li class="mui-table-view-cell mui-media">
				    <p class="f-20 text-success">欢迎使用H-ui.admin <span class="f-14">v3.1</span>后台模版！</p>
				    <p>登录次数：18 </p>
				    <p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
				</li>
            </div>
            <!--<div class="msg_title">
                是数据库是
            </div>-->
            <ul class="mui-table-view" id="msg_ul">
                <!--<li class="mui-table-view-cell mui-media"><a href="javascript:;"><img
                        class="mui-media-object mui-pull-right" src="static/img/fire-1.jpg">
                    <div class="my_msg_div"><p class="msg2">error msg<span></span></p></div>
                </a></li>
                <li class="mui-table-view-cell mui-media"><a href="javascript:;"><img
                        class="mui-media-object mui-pull-left" src="mui/images/shuijiao.jpg"
                        style="margin-right:0px">
                    <div class="f_msg_div"><p class="msg1">error msg<span></span></p></div>
                </a></li>-->
            </ul>
        </div>
        <div class="msg-text">
            <input id='content' type="text" class="mui-input-clear mui-input" autofocus autocomplete="off"/>
            <button id="submit" type="button">发送</button>
        </div>
    </div>
</div>
</body>
</html>